<div class="utils-box">
    <button nz-button (click)="toggleUtilsVisible()" style="height:32px" nzType="primary">工具箱<i nz-icon nzType="down" nzTheme="outline"></i></button>
    <div class="utils-container" id="map-utils-container" [style.display]="utilsVisible?'block':'none'">
        <div class="map-list-container" [style.display]="!currentUtil ? 'block' : 'none'">
            <div class="title map-utils-title">
                <div class="util-icon">
                    <i nz-icon nzType="tool" nzTheme="outline"></i>
                </div>
                <span>
                    工具箱
                </span>
                <a class="close-btn" (click)="closeUtilsBox()">
                    <i nz-icon nzType="close" nzTheme="outline"></i>
                </a>
            </div>
            <div class="map-utils-list">
                <nz-collapse>
                    <nz-collapse-panel
                        *ngFor="let utilGroup of utils"
                        [nzHeader]="utilGroup.label"
                        [nzActive]="utilGroup.active"
                    >
                        <div class="item" *ngFor="let util of utilGroup.list" (click)="insertUtilContent(util)">
                            <i *ngIf="util.icon.startsWith('icon');else zorroIcon" nz-icon [iconfont]="util.icon"></i>
                            <ng-template #zorroIcon>
                                <i nz-icon [nzType]="util.icon" nzTheme="outline"></i>
                            </ng-template>
                            <span class="name">{{util.label}}</span>
                        </div>
                    </nz-collapse-panel>
                </nz-collapse>
                <!--<div class="item" *ngFor="let util of utils" (click)="insertUtilContent(util)">
                    <i *ngIf="util.icon.startsWith('icon');else zorroIcon" nz-icon [iconfont]="util.icon"></i>
                    <ng-template #zorroIcon>
                        <i nz-icon [nzType]="util.icon" nzTheme="outline"></i>
                    </ng-template>
                    <span class="name">{{util.label}}</span>
                </div>-->
            </div>
        </div>
        <div class="util-content" [style.display]="currentUtil ? 'block' : 'none'">
            <div class="title" *ngIf="currentUtil">
                {{currentUtil.label}}
                <a class="back-btn" (click)="backUtilsBox()">
                    <i nz-icon nzType="arrow-left" nzTheme="outline"></i>
                </a>
                <a class="close-btn" (click)="closeUtilsBox()">
                    <i nz-icon nzType="close" nzTheme="outline"></i>
                </a>
            </div>
            <div class="content-wrapper" [style.display]="currentUtil ? 'block' : 'none'">
                <div *ngIf="currentUtil?.isAlways" class="line">
                    <span class="apply">应用</span>
                    <nz-switch class="switcher" [(ngModel)]="currentUtil.switch" (ngModelChange)="toggle(currentUtil)"></nz-switch>
                </div>
                <div class="content-sub-wrapper">
                    <div class="util-content-overlay" [class.visible]="currentUtil?.isAlways && !currentUtil?.switch">
                    </div>
                    <div class="host-wrapper">
                        <ng-template util-host></ng-template>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

